<style lang="scss" scoped>
.gap {
  @apply font-bold text-red-500;
}
</style>

<template>
  <div class="h-full">
    DEMO_6

    <div
      is="vue:use-select"
      v-bind="{
        options: ['A-A', 'B-B', 'C-C'],
        isArray: true,
      }"
      class="flex"
    ></div>
    <div v-pre>
      {{ `${0}01 ` }}
    </div>
    <a-watermark
      content="一柯小白菜"
      :font="{ fontSize: 24, color: 'rgba(0,0,0,0.06)' }"
      :gap="[100, 35]"
      :rotate="-11"
    >
      <div class="flex gap-x-6 mt-4 text-3xl p-16" style="writing-mode: tb">
        <div>
          <p>抽<span class="gap">刀</span>断水水更流</p>
          <p>举<span class="gap">杯</span>消愁愁更愁</p>
          <p>人生在世不<span class="gap">称</span>意</p>
          <p>明朝散发<span class="gap">弄</span>扁舟</p>
          <br />
          <p>人生得意须尽<span class="gap">欢</span></p>
          <p>莫使金<span class="gap">樽</span>空对月</p>
          <p>天生<span class="gap">我</span>材必有用</p>
          <p>千金<span class="gap">散</span>尽还复来</p>
          <br />
          <p>黄河之水<span class="gap">天</span>上来</p>
          <p>奔流到<span class="gap">海</span>不复回</p>
          <p>高堂明镜<span class="gap">悲</span>白发</p>
          <p>朝如<span class="gap">青</span>丝暮成雪</p>
        </div>
        <div>
          <p>今人不<span class="gap">见</span>古时月</p>
          <p>今月曾经<span class="gap">照</span>古人</p>
          <p>古人今人<span class="gap">若</span>流水</p>
          <p><span class="gap">共</span>看明月皆如此</p>
          <br />
          <p>青天有月来<span class="gap">几</span>时</p>
          <p>我今<span class="gap">停</span>杯一问之</p>
          <p>人<span class="gap">攀</span>明月不可得</p>
          <p>日行却与人相<span class="gap">随</span></p>
        </div>
        <div></div>
      </div>
    </a-watermark>
    <!-- <div class="p-6">
      <p class="mt-2 font-bold">两天后和谁过节最幸福<span class="gap">？</span></p>
      <a-checkbox-group direction="vertical" v-model="checkbox1" class="ml-4">
        <a-checkbox value="1">柳沧海</a-checkbox>
        <a-checkbox value="2">家人般的帮会成员</a-checkbox>
        <a-checkbox value="2">亲如手足的结义</a-checkbox>
        <a-checkbox value="2">不离不弃木桩</a-checkbox>
        <a-checkbox value="2">全是变异植物的菜地</a-checkbox>
        <a-checkbox value="2">交心知己</a-checkbox>
        <a-checkbox value="2">兄弟姐妹</a-checkbox>
        <a-checkbox value="3">
          燕字归时第一纯爱
          <span class="text-[#F39A38]">铁衣</span>
          荷禾
        </a-checkbox>
      </a-checkbox-group>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
const checkbox1 = ref()
</script>
